<template>
  <div>
    <el-collapse v-model="activeName">
      <!-- 常规信息 -->
      <el-collapse-item name="common">
        <template #title>
          <i class="el-icon-info"></i> 常规信息
        </template>
        <common-panel :id="elementId" />
      </el-collapse-item>

      <!-- 任务信息 -->
      <el-collapse-item name="Task" v-if="elementType.includes('Task')">
        <template #title>
          <i class="el-icon-s-claim"></i> 任务配置
        </template>
        <user-task-panel :id="elementId" />
      </el-collapse-item>

      <!-- 表单 -->
      <el-collapse-item name="form" v-if="formVisible">
        <template #title>
          <i class="el-icon-s-order"></i> 表单配置
        </template>
        <form-panel :id="elementId" />
      </el-collapse-item>

      <!-- 执行监听器 -->
      <el-collapse-item name="executionListener">
        <template #title>
          <i class="el-icon-s-promotion"></i> 执行监听器
          <el-badge :value="executionListenerCount" class="item" type="primary" />
        </template>
        <execution-listener
          :id="elementId"
          @getExecutionListenerCount="getExecutionListenerCount"
        />
      </el-collapse-item>

      <!-- 任务监听器 -->
      <el-collapse-item name="taskListener" v-if="elementType === 'UserTask'">
        <template #title>
          <i class="el-icon-s-flag"></i> 任务监听器
          <el-badge :value="taskListenerCount" class="item" type="primary" />
        </template>
        <task-listener
          :id="elementId"
          @getTaskListenerCount="getTaskListenerCount"
        />
      </el-collapse-item>

      <!-- 多实例 -->
      <el-collapse-item name="multiInstance" v-if="elementType.includes('Task')">
        <template #title>
          <i class="el-icon-s-grid"></i> 多实例
        </template>
        <multi-instance :id="elementId" />
      </el-collapse-item>

      <!-- 流转条件 -->
      <el-collapse-item name="condition" v-if="conditionVisible">
        <template #title>
          <i class="el-icon-share"></i> 流转条件
        </template>
        <condition-panel :id="elementId" />
      </el-collapse-item>

      <!-- 扩展属性 -->
      <el-collapse-item name="properties">
        <template #title>
          <i class="el-icon-circle-plus"></i> 扩展属性
        </template>
        <properties-panel :id="elementId" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted, getCurrentInstance } from 'vue';
import { translateNodeName } from './common/bpmnUtils';

// 子组件
import ExecutionListener from './panel/executionListener.vue';
import TaskListener from './panel/taskListener.vue';
import MultiInstance from './panel/multiInstance.vue';
import CommonPanel from './panel/commonPanel.vue';
import UserTaskPanel from './panel/taskPanel.vue';
import ConditionPanel from './panel/conditionPanel.vue';
import FormPanel from './panel/formPanel.vue';
import PropertiesPanel from './panel/PropertiesPanel.vue';

// 定义数据
const activeName = ref('common');
const executionListenerCount = ref(0);
const taskListenerCount = ref(0);
const elementId = ref('');
const elementType = ref('');
const conditionVisible = ref(false);
const formVisible = ref(false);

const { proxy } = getCurrentInstance();
const modelerStore = proxy.modelerStore;
// const instance = getCurrentInstance();

// 监听elementId变化
watch(elementId, () => {
  activeName.value = 'common';
});

onMounted(() => {
  // console.log("组件已挂载，初始化模型");
  initModels();
});

const initModels = () => {
  getActiveElement();
};

const getActiveElement = () => {
  // 初始第一个选中元素 bpmn:Process
  initFormOnChanged(null);
  modelerStore.modeler.on("import.done", e => {
    initFormOnChanged(null);
  });

  // 监听选择事件，修改当前激活的元素以及表单
  modelerStore.modeler.on("selection.changed", ({newSelection}) => {
    initFormOnChanged(newSelection[0] || null);
  });

  modelerStore.modeler.on("element.changed", ({element}) => {
    if (element && element.id === elementId.value) {
      initFormOnChanged(element);
    }
  })
};

const initFormOnChanged = (element) => {
  let activatedElement = element;

  if (!activatedElement) {
      activatedElement =
        modelerStore.elRegistry.find(el => el.type === "bpmn:Process") ??
        modelerStore.elRegistry.find(el => el.type === "bpmn:Collaboration");
  }

  if (!activatedElement) {
    console.warn("No element selected");
    return
  }

  modelerStore.element = activatedElement;
  elementId.value = activatedElement.id;
  elementType.value = activatedElement.type.split(":")[1] || "";
  conditionVisible.value = !!(
        elementType.value === "SequenceFlow" &&
        activatedElement.source &&
        activatedElement.source.type.indexOf("StartEvent") === -1
      );
  formVisible.value = elementType.value === "UserTask" || elementType.value === "StartEvent";

};

// 定义事件处理
const getExecutionListenerCount = (value) => {
  executionListenerCount.value = value;
};

const getTaskListenerCount = (value) => {
  taskListenerCount.value = value;
};

const translateNodeNameFn = (val) => {
  return translateNodeName(val);
};
</script>

<style lang="scss" scoped>
</style>